<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'
import { useCounterStore } from '../stores'
import { ElMessageBox,ElMessage } from 'element-plus'
import { Liquid } from '@antv/g2plot';

export default defineComponent({
    setup() {
        const {proxy}=getCurrentInstance()
        const store=useCounterStore()
        const roleFlag=ref(store.flag)
        const taskArry=ref([])
        const editArray=ref([])
        const detailArray=ref([])
        const childArray=ref([])
        const projectArray=ref([])
        const dialogVisible=ref(false)
        const detailVisiable=ref(false)
        const taskList=()=>{
            proxy.$http.get(`/system/user/get/${store.userName}`)
            .then((res)=>{
                console.log(res)
                proxy.$http.get(`system/user/${res.data[0].userId}`)
                .then(res=>{
                    console.log(res.taskIds)
                    for(var i=0;i<res.taskIds.length;i++){
                        proxy.$http.get(`system/task/${res.taskIds[i]}`)
                        .then(res=>{
                            taskArry.value=[...taskArry.value,res.data[0]]
                        })
                    }
                    console.log(taskArry.value)
                })
            })
        }
        const edit=(data)=>{
            console.log(data)
            dialogVisible.value=true
            editArray.value=data
        }
        const editTask=()=>{
            proxy.$http.put('/system/task',{
                'taskId':editArray.value.taskId,
                'taskName':editArray.value.taskName,
                'conscientious':editArray.value.conscientious,
                'workingHours':editArray.value.workingHours
            }).then((res)=>{
                console.log(res)
                dialogVisible.value=false
                ElMessage({
                    showClose: true,
                    message: '修改任务信息成功 ^.^',
                    type: 'success',
                })
            }).catch((err)=>{
                ElMessage({
                    showClose: true,
                    message: '修改任务信息失败 X.x',
                    type: 'error',
                })
            })
        }
        const deleteTask=(data)=>{
            proxy.$http.delete(`system/task/${data.taskId}`)
            .then(res=>{
                ElMessage({
                    showClose: true,
                    message: '删除任务成功 ^.^',
                    type: 'success',
                })
                taskList()
            }).catch((err)=>{
                ElMessage({
                    showClose: true,
                    message: '删除任务失败 X.x',
                    type: 'error',
                })
            })
        }
        const showDetail=(data)=>{
            detailVisiable.value=true
            detailArray.value=data
            store.setTaskArray(data)
            let liquidPlot
            proxy.$http.get(`system/subtask/list/${data.taskId}`)
            .then((res)=>{
                console.log(res)
                childArray.value=res.data
                let statuss=0
                for(var i=0;i<childArray.value.length;i++){
                    if(childArray.value[i].status==1){
                        statuss++
                    }
                } 
                console.log(statuss)
                let percents=statuss/(childArray.value.length)
                liquidPlot = new Liquid('container', {
                    percent: percents,
                    outline: {
                        border: 4,
                        distance: 8,
                    },
                    wave: {
                        length: 128,
                    },
                });
                liquidPlot.render();
            })
            liquidPlot.destroy()
        }
        const editChildStatus=(data)=>{
            proxy.$http.put(`system/subtask/`,{
                'subtaskId':data.subtaskId,
                'subtaskName':data.subtaskName,
                'status':1,
                'taskIds':[store.taskArrayData.taskId]
            }).then(res=>{
                showDetail(store.taskArrayData)
            })
        }
        const deleteChildTask=(data)=>{
            proxy.$http.delete(`system/subtask/${data.subtaskId}`)
            .then(res=>{
                showDetail(store.taskArrayData)
            })
        }
        const projectList=()=>{
            
        }
        taskList()
        return{
            taskArry,
            roleFlag,
            editArray,
            detailArray,
            childArray,
            projectArray,
            dialogVisible,
            detailVisiable,
            edit,
            editTask,
            deleteTask,
            showDetail,
            editChildStatus,
            deleteChildTask,
            projectList,
        }
    },
})

</script>

<template>
    <div>
        <el-card>
            <el-scrollbar height="600px">
            <el-table
            :data="taskArry"
            style="width: 100%">
                <el-table-column prop="taskId" label="任务号" width="170"></el-table-column>
                <el-table-column prop="taskName" label="任务名" width="170"></el-table-column>
                <el-table-column prop="status" label="任务状态" width="170"></el-table-column>
                <el-table-column prop="conscientious" label="负责人" width="170"></el-table-column>
                <el-table-column prop="workingHours" label="任务时长" width="170"></el-table-column>
                <el-table-column prop="workingHours" label="剩余时长" width="170"></el-table-column>
                <el-table-column prop="createBy" label="开始时间" width="170"></el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="scope">
                    <div class="box">
                    <el-tooltip :content="scope.row.taskName+`的详情`" placement="bottom" effect="light">
                    <el-button type="success" class="iconfont icon-xianshi1" circle @click="showDetail(scope.row)"></el-button></el-tooltip>
                    <div>
                    <el-tooltip :content="scope.row.taskName+`的修改`" placement="bottom" effect="light">
                    <el-button type="primary" class="iconfont icon-icon" circle @click="edit(scope.row)" style="margin-left:10px"></el-button></el-tooltip>
                    <el-tooltip :content="scope.row.taskName+`的删除`" placement="bottom" effect="light">
                    <el-button type="danger" class="iconfont icon-icon1" circle @click="deleteTask(scope.row)"></el-button></el-tooltip>
                    </div>
                    </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
        </el-card>
        <el-dialog
            title="编辑任务信息"
            width="40%" v-model="dialogVisible">
            <el-form :model="passForm" status-icon :rules="rules" ref="passForm" label-width="100px" class="grid2">
                <el-form-item label="任务名：">
                <el-input v-model="editArray.taskName"></el-input>
                </el-form-item>
                <el-form-item label="负责人：">
                <el-input v-model="editArray.conscientious"></el-input>
                </el-form-item>
                <el-form-item label="任务时长：">
                <el-input v-model="editArray.workingHours"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible=false">取 消</el-button>
                    <el-button type="primary" @click="editTask()">确 定</el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
        <el-dialog
            :title="detailArray.taskName"
            width="40%" v-model="detailVisiable" v-if="detailVisiable">
                <div class="text item">
                <div class="grid2">
                <div>任务编号:  <el-tag>{{detailArray.taskId}}</el-tag></div>
                <div>任务状态:  <el-tag>{{detailArray.status}}</el-tag></div>
                <div>任务负责人:  <el-tag>{{detailArray.conscientious}}</el-tag></div>
                <div>子任务:  
                    <el-table
                    :data="childArray"
                    style="width: 100%">
                        <el-table-column prop="subtaskName" width="180"></el-table-column>
                        <el-table-column prop="status" width="180"></el-table-column>
                        <el-table-column width="180">
                            <template #default="scope">
                            <div class="box">
                            <el-button type="primary" class="iconfont icon-icon" circle @click="editChildStatus(scope.row)"></el-button>
                            <el-button type="danger" class="iconfont icon-icon1" circle @click="deleteChildTask(scope.row)"></el-button>
                            </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div>任务进度:  <div id="container"></div></div>
                </div>
                </div>
        </el-dialog>
    </div>
</template>

<style scoped>
 .box{
        display: flex;
        flex-direction: row;
    }
    .grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    width: 100%;
}
.title{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 20px;
}

.grid2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 3px;
}
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
